<template>
    <div class="container-box">
        <input @click="reduce" class="btn1" type="button" value="-">
        <input class="num" type="number" v-model="countNum" >
        <input @click="add" class="btn2" type="button" value="+">
    </div>
</template>

<script>
export default {
    props:['num','title'],
    data(){
        return {
            countNum:this.$props.num,
        }
    },
    methods:{
        reduce(){
            if (this.countNum <= 0 ) return
            this.countNum--
            this.$emit('countNum',{currentNum:this.countNum,currenTtitle:this.$props.title })
        },
        add(){
            this.countNum++
            this.$emit('countNum',{currentNum:this.countNum,currenTtitle:this.$props.title })
        }
    },
    watch:{
        num(n,old){
            this.countNum = n
        }
    }
}
</script>

<style scoped>
.btn1{
    margin-right: -4px;
    width: 20px;
}
.num{
    text-align: center;
    width: 40px;
}
.btn2{
    margin-left: -5px;
    width: 20px;
}
</style>